<template>
  <div id="financeSettleListDiv">
    <vxe-toolbar perfect>
      <template #buttons>
        <vxe-form :data="searchForm" class="searchform form-input-m">
          <vxe-form-item title="结算日期[起]">
            <template #default="{ data }">
              <el-date-picker v-model="data.settleDateBegin" :value-format="'YYYY-MM-DD HH:mm:ss'" type="datetime" placeholder="申请日期[起]" :shortcuts="shortcuts" />
            </template>
          </vxe-form-item>
          <vxe-form-item title="结算日期[止]">
            <template #default="{ data }">
              <el-date-picker v-model="data.settleDateEnd" :value-format="'YYYY-MM-DD HH:mm:ss'" type="datetime" placeholder="申请日期[止]" :shortcuts="shortcuts" />
            </template>
          </vxe-form-item>
          <vxe-form-item>
            <vxe-input v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findFinanceSettleList" @keyup="keyupEnter" @search-click="findFinanceSettleList()"></vxe-input>
          </vxe-form-item>
          <vxe-form-item>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-search" content="查询" :loading="mLoading" @click="findFinanceSettleList"></vxe-button>
            <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="deleteBatchFinanceSettle"></vxe-button>
          </vxe-form-item>
        </vxe-form>
      </template>
    </vxe-toolbar>
    <Splitpanes>
      <Pane size="60">
        <div class="tableBox">
          <vxe-table ref="settleTableRef" :data="settleList" :loading="mLoading" @current-change="settleRowClick" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
            <vxe-column type="checkbox" width="30" fixed="left" align="center"></vxe-column>
            <vxe-column field="settleNo" title="单据号" width="150"> </vxe-column>
            <vxe-column field="settleStatus" title="状态" width="80"></vxe-column>
            <vxe-column field="settleType" title="单据类型" width="80"></vxe-column>
            <vxe-column field="companyCode" title="单位编号" width="100"></vxe-column>
            <vxe-column field="companyName" title="单位名称"></vxe-column>
            <vxe-column field="costs" title="金额" width="100"></vxe-column>
            <vxe-column field="settleDate" title="结算时间" width="150"></vxe-column>
          </vxe-table>
        </div>
      </Pane>
      <Pane size="40">
        <el-tabs type="border-card" v-model="activeName" @tab-click="tabHandleClick">
          <el-tab-pane label="结算明细" name="first" :disabled="IsEmpty(sltSettle.id)">
            <div class="tableBoBox">
              <vxe-table ref="reqDetailTableRef" :data="settleDetailList" :loading="dLoading" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
                <vxe-column type="seq" width="24" fixed="left"></vxe-column>
                <vxe-column field="feeCode" title="项目代号" width="150"> </vxe-column>
                <vxe-column field="feeName" title="项目名称" width="150"> </vxe-column>
                <vxe-column field="price" title="单价" width="80"></vxe-column>
                <vxe-column field="amount" title="数量" width="100"></vxe-column>
                <vxe-column field="costs" title="金额" width="100"></vxe-column>
              </vxe-table>
            </div>

          </el-tab-pane>
          <el-tab-pane label="申请信息" name="second" :disabled="IsEmpty(sltSettle)||IsEmpty(sltSettle.id)">
            <div class="tableBoBox">
              <vxe-table ref="reqMainTableRef" :data="reqMainList" :loading="rLoading" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
                <vxe-column type="seq" width="24" fixed="left"></vxe-column>
                <vxe-column field="reqNo" title="条码号"></vxe-column>
                <vxe-column field="patNo" title="病历号"></vxe-column>
                <vxe-column field="patNa" title="患者姓名"></vxe-column>
                <vxe-column field="reqPurpose" title="检测项目"></vxe-column>
              </vxe-table>
            </div>
          </el-tab-pane>
        </el-tabs>

      </Pane>
    </Splitpanes>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted, ObjectDirective } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { IsEmpty, formatDateTime, autoIncrementNumber, sortByField } from '@/utils/common';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import { AppStore } from '@/stores/store'; //'../../../stores/store';
import { VXETable, VxeFormPropTypes, VxeFormInstance } from 'vxe-table';
let store = AppStore();
const shortcuts = [
  {
    text: '今天',
    value: new Date()
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 1);
      return date;
    }
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date();
      date.setDate(date.getDate() - 7);
      return date;
    }
  }
];

let searchForm = reactive({
  searchValue: '',
  companyCode: '',
  settleDateBegin: formatDateTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), 'yyyy-MM-dd 00:00:00'),
  settleDateEnd: formatDateTime(new Date(), 'yyyy-MM-dd 23:59:59')
});
let activeName = ref('first');
let inspectCompanyList: any = reactive([]);
let settleList: any = reactive([]);
let settleDetailList: any = reactive([]);
let reqMainList: any = reactive([]);

let mLoading = ref(false); //刷新加载状态
let dLoading = ref(false); //刷新加载状态
let rLoading = ref(false); //刷新加载状态

let sltSettle: any = ref({});

//暴露属性和方法
defineExpose({
  initPage
});

function initPage(company: any) {
  settleList.length = 0;
  settleDetailList.length = 0;
  reqMainList.length = 0;
  searchForm.companyCode = company.companyCode;
  findFinanceSettleList();
}

// 页面加载时更新报告单元/字典
onMounted(async () => {
  // findInspectCompanyList();
  // await findFinanceSettleList();
});

async function findFinanceSettleList() {
  mLoading.value = true;
  settleList.length = 0; //放入数据前清空数据
  const url = '/lab/financeSettle/findFinanceSettleList';
  await proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        searchValue: searchForm.searchValue,
        companyCode: searchForm.companyCode,
        settleDateBegin: searchForm.settleDateBegin,
        settleDateEnd: searchForm.settleDateEnd
      }
    })
    .then((res: any) => {
      settleList.push(...res.data);
      if (settleList.length == 0) {
        sltSettle.value = {};
        settleDetailList.length = 0;
        reqMainList.length = 0;
      } else {
        const kn = settleList.find((k: any) => k.id == sltSettle.value.id);
        if (IsEmpty(kn)) {
          settleRowClick({ row: settleList[0] }); //默认选中第一条数据
        } else {
          settleRowClick({ row: kn }); //默认选中第一条数据
        }
      }

      mLoading.value = false;
    })
    .catch((err: any) => {
      mLoading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function settleRowClick({ row }: any) {
  if (IsEmpty(row)) {
    sltSettle.value = {};
    settleDetailList.length = 0;
    reqMainList.length = 0;
  } else {
    (proxy.$refs.settleTableRef as any).setCurrentRow(row);
    sltSettle.value = row;

    if (activeName.value == 'first') {
      findSettleDetailList();
    } else if (activeName.value == 'second') {
      findReqMainBySettleList();
    }
  }
}

function tabHandleClick(tab) {
  if (tab.props.name == 'first') {
    findSettleDetailList();
  } else if (tab.props.name == 'second') {
    findReqMainBySettleList();
  }
}

function findReqMainBySettleList() {
  reqMainList.length = 0;
  rLoading.value = true;
  const url = '/lab/financeSettle/findReqMainBySettleList';
  proxy.$http
    .get(url, {
      params: {
        settleId: sltSettle.value.id
      }
    })
    .then((res: any) => {
      reqMainList.length = 0;
      reqMainList.push(...res.data);

      rLoading.value = false;
    })
    .catch((err: any) => {
      rLoading.value = false;
      proxy.$alert(err, '提示');
    });
}

function findSettleDetailList() {
  settleDetailList.length = 0;
  dLoading.value = true;
  const url = '/lab/financeSettleDetail/findFinanceSettleDetailList';
  proxy.$http
    .get(url, {
      params: {
        //settleNo: sltSettle.settleNo,
        settleId: sltSettle.value.id
      }
    })
    .then((res: any) => {
      settleDetailList.length = 0;
      settleDetailList.push(...res.data);

      dLoading.value = false;
    })
    .catch((err: any) => {
      dLoading.value = false;
      proxy.$alert(err, '提示');
    });
}
async function deleteBatchFinanceSettle() {
  const sltFaultRepairs = (proxy.$refs.settleTableRef as any).getCheckboxRecords();
  if (!(sltFaultRepairs.length > 0)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    const type = await VXETable.modal.confirm('确定删除选中记录?'); /*不能改el  $confirm 回车事件冒泡你*/
    if (type === 'confirm') {
      //后台删除数据
      const delFaultRepairList = sltFaultRepairs.filter((p: any) => !IsEmpty(p.id));
      if (delFaultRepairList.length > 0) {
        const data = { labFinanceSettleList: delFaultRepairList };
        const url = '/lab/financeSettle/batchDeleteFinanceSettleList';
        proxy.$http
          .post(url, data)
          .then((res: any) => {
            findFinanceSettleList(); // 获取检验仪器表格数据
            VxeMessage(res.status.msg, VxeNotifyType.success);
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      }
    }
  }
}

function companyCodeChangeEvent() {
  findFinanceSettleList();
}
// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findFinanceSettleList();
  }
}

async function findInspectCompanyList() {
  const url = '/lab/inspectCompany/findInspectCompanyList';
  await proxy.$http
    //注意此处的数据条数
    .get(url)
    .then((res: any) => {
      if (res.status.code === 1) {
        inspectCompanyList.push(...res.data);
      }
    })
    .catch((err: any) => {
      // VxeMessage('获取机构列表失败',VxeNotifyType.error)
    });
}
</script>

<style lang="scss" scoped>
#financeSettleListDiv {
  width: 100%;
  height: 100%;

  .splitpanes {
    height: calc(100% - 40px);
  }

  .el-tabs {
    height: 100%;
    :deep(.el-tabs__content) {
      height: calc(100% - 40px);
      padding: 0;
      .el-tab-pane {
        height: 100%;
      }
    }
  }
  // 右侧保存按钮
  .saveBtn {
    //float: right;
    margin: 0px 30px;
  }
  // 附加按钮间距
  .button-blue {
    margin: 5px 0 5px 5px;
  }
  .button-red {
    margin: 5px 0 5px 5px;
  }

  // 机构表格
  :deep(.vxe-table--render-default) {
    height: 100%;
  }
  :deep(.vxe-table--render-wrapper) {
    height: 100%;
    background-color: $base-white;
  }
  .tableBox {
    height: calc(100%);
  }
  .tableBoBox {
    height: calc(100%);
  }

  .tableMoSaBox {
    height: calc(100% - 40px);
  }

  .searchform {
    padding: 0 0 0 10px;

    :deep(.vxe-form--item) {
      margin-right: 30px;
    }
  }

  .searchform .vxe-input {
    --el-input-width: 120px;
  }

  .searchform .vxe-select {
    --el-select-width: 120px;
  }
  .form-input-m {
    .el-input {
      width: 150px;
    }

    .vxe-input {
      width: 150px !important;
    }
  }
}
</style>